<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>

    <div id="bw1">
        <div>
            <div>
                333
            </div>
        </div>
    </div>
    <script>
        /* 
            获取标签的子节点
            childNodes：获取子节点的所有元素以及元素之间的文本元素
            children：只会返回元素节点。
        */
        const ulObj = document.querySelector("ul");
        const ulNodes = ulObj.childNodes;
        console.log(ulNodes); //NodeList(7)

        console.log(ulNodes[0]) //#text : 表示的是空行
        console.log(ulNodes[1]) //<li>111</li>
        console.log(ulNodes[2]) //#text
        console.log(ulNodes[3]) //<li>222</li>

        console.log(ulNodes[0].nodeType);   //3 Node.TEXT_NODE	
        console.log(ulNodes[1].nodeType);   //1 Node.ELEMENT_NODE

        console.log(ulObj.children);//HTMLCollection(3) [li, li, li]
        // console.log(ulObj.children[0]);
        // console.log(ulObj.children[1]);
        // console.log(ulObj.childElementCount);   //  3

        const div1Obj = document.querySelector("#bw1");
        console.log(div1Obj.childNodes);//3
        console.log(div1Obj.children);//1
    </script>
</body>

</html>